<template>
  <div>
    <div class="countdown-class countdown-box">
      <div
        class="countdown-item"
        :style="[
          `background:${bgcolor}`,
          `border-color:${bcolor}`,
          `height:${height}rpx`,
        ]"
        v-if="days"
      >
        <div
          class="countdown-time"
          :class="scale ? 'countdown-scale' : ''"
          :style="[
            `font-size:${size}rpx`,
            `color:${color}`,
          ]"
        >
          {{ d }}
        </div>
      </div>
      <div
        class="countdown-colo"
        :class="bcolor == 'transparent' ? 'colon-pad' : ''"
        :style="[
          `line-height:${colonSize}rpx`,
          `font-size:${colonSize}rpx`,
          `color:${colonColor}`,
        ]"
        v-if="days"
      >
        {{ isColon ? ":" : "天" }}
      </div>
      <div
        class="countdown-item"
        :style="[
          `background:${bgcolor}`,
          `border-color:${bcolor}`,
          `height:${height}rpx`,
        ]"
        v-if="hours"
      >
        <div
          class="countdown-time"
          :class="scale ? 'countdown-scale' : ''"
          :style="[
            `font-size:${size}rpx`,
            `color:${color}`,
          ]"
        >
          {{ h }}
        </div>
      </div>
      <div
        class="countdown-colon"
        :class="bcolor == 'transparent' ? 'colon-pad' : ''"
        :style="[
          `line-height:${colonSize}rpx`,
          `font-size:${colonSize}rpx`,
          `color:${colonColor}`,
        ]"
        v-if="hours"
      >
        {{ isColon ? ":" : "时" }}
      </div>

      <div
        class="countdown-item"
        :style="[
          `background:${bgcolor}`,
          `border-color:${bcolor}`,
          `height:${height}rpx`,
        ]"
        v-if="minutes"
      >
        <div
          class="countdown-time"
          :class="scale ? 'countdown-scale' : ''"
          :style="[
            `font-size:${size}rpx`,
            `color:${color}`,
          ]"
        >
          {{ i }}
        </div>
      </div>
      <div
        class="countdown-colon"
        :class="bcolor == 'transparent' ? 'colon-pad' : ''"
        :style="[
          `line-height:${colonSize}rpx`,
          `font-size:${colonSize}rpx`,
          `color:${colonColor}`,
        ]"
        v-if="minutes"
      >
        {{ isColon ? ":" : "分" }}
      </div>
      <div
        class="countdown-item"
        :style="[
          `background:${bgcolor}`,
          `border-color:${bcolor}`,
          `height:${height}rpx`,
        ]"
        v-if="seconds && minutes"
      >
        <div
          class="countdown-time"
          :class="scale ? 'countdown-scale' : ''"
          :style="[
            `font-size:${size}rpx`,
            `color:${color}`,
          ]"
        >
          {{ s }}
        </div>
      </div>
      <div
        class="countdown-colon"
        :class="bcolor == 'transparent' ? 'colon-pad' : ''"
        :style="[
          `font-size:${colonSize}rpx`,
          `color:${colonColor}`,
          `line-height:${colonSize}rpx`,
        ]"
        v-if="seconds && !isColon && minutes"
      >
        秒
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "countdown",
};
</script>
<script lang="ts" setup>
import { ref, getCurrentInstance, watch, onMounted } from "vue";

const {
  proxy: { $utils },
} = getCurrentInstance() as any;

const props = withDefaults(
  defineProps<{
    width?: number;
    height?: number;
    bcolor?: string;
    bgcolor?: string;
    size?: number;
    color?: string;
    scale?: boolean;
    colonSize?: number;
    colonColor?: string;
    time?: number;
    days?: boolean;
    hours?: boolean;
    minutes?: true;
    seconds?: true;
    isColon?: true;
  }>(),
  {
    width: 35,
    height: 30,
    bcolor: "#333",
    bgcolor: "",
    size: 18,
    color: "#333",
    scale: false,
    colonSize: 20,
    colonColor: "#333",
    time: 0,
    days: false,
    hours: true,
    minutes: true,
    seconds: true,
    isColon: true,
  }
);

const emit = defineEmits(["end", "time"]);

const d = ref<string | number>("0");

const h = ref<string | number>("00");

const i = ref<string | number>("00");

const s = ref<string | number>("00");

const ms = ref<Array<number>>([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);

const ani = ref<boolean>(false);

const countdown = ref<any>(null);

const clearTimer = () => {
  clearInterval(countdown.value);
  countdown.value = null;
};
const endOfTime = () => {
  ani.value = false;
  clearTimer();
  emit("end", {});
};

const doLoop = () => {
  let seconds = props.time || 0;
  ani.value = true;
  countDown(seconds);
  countdown.value = setInterval(() => {
    seconds--;
    if (seconds < 0) {
      endOfTime();
      return;
    }
    countDown(seconds);
  }, 1000);
};
const countDown = (_seconds: number) => {
  let day: string | number = 0,
    hour: string | number = 0,
    minute: string | number = 0,
    _second: string | number = 0;
  if (_seconds > 0) {
    day = props.days ? Math.floor(_seconds / (60 * 60 * 24)) : 0;
    hour = props.hours ? Math.floor(_seconds / (60 * 60)) - day * 24 : 0;
    minute = props.minutes
      ? Math.floor(_seconds / 60) - hour * 60 - day * 24 * 60
      : 0;
    _second =
      Math.floor(_seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60;
  } else {
    endOfTime();
  }
  hour = hour < 10 ? "0" + hour : String(hour);
  minute = minute < 10 ? "0" + minute : String(minute);
  _second = _second < 10 ? String("0" + _second) : String(_second);
  d.value = day;
  h.value = hour;
  i.value = minute;
  s.value = _second;
};

onMounted(()=>{
    clearTimer();
    doLoop();
})

watch(
  () => props.time,
  (newValue, oldValue) => {
    clearTimer();
    doLoop();
  },
  { deep: true }
);
</script>


<style scoped>
	.countdown-box {
	  display: flex;
	  align-items: center;
	}
	
	.countdown-box {
	  display: flex;
	  align-items: center;
	}
	
	.countdown-item {
	  border: 1rpx solid;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  padding: 0 4rpx;
	  margin: 0 2rpx;
	  border-radius:2rpx;
	  white-space: nowrap;
	  transform: translateZ(0);
	}
	
	.countdown-time {
	  margin: 0;
	
	}
	
	.countdown-colon {
	  display: flex;
	  justify-content: center;
	  padding: 0 2rpx;
	}
	
	.colon-pad {
	  margin: 0 2rpx;
	}
	
	.countdown-scale {
	  transform: scale(0.9);
	  transform-origin: center center;
	}
</style>
